<template>
  <div>
    <van-image-preview
      v-model:show="state.show"
      :images="imagesData"
      :start-position="state.index"
      :loop="false"
    ></van-image-preview>
  </div>
</template>

<script setup>
import { ImagePreview } from 'vant'
import 'vant/es/image-preview/style'
const VanImagePreview = ImagePreview.Component

defineProps({
  imagesData: {
    type: Array,
    default: () => [],
  },
})

const state = reactive({
  show: false,
  index: 0,
})

const openPreview = () => {
  state.show = true
}

const setIndex = (index) => {
  state.index = index
}

defineExpose({
  openPreview,
  setIndex,
})
</script>
